import React, { useCallback, useEffect, useState } from 'react';
import { useRequest } from 'ice';
import { Button, Card, Checkbox, Col, DatePicker, Form, Input, message, Modal, Radio, Row, Select, Space, Statistic, Switch, Table, TimePicker } from 'antd';
import testService from '@/services/testService';

export default function () {
  const { data = [], loading, request: getNodes } = useRequest(testService.getNodes);
  const { loading: saving, request: addNodes } = useRequest(testService.addNodes);
  const { request: deleteNode } = useRequest(testService.deleteNode);
  const [ visible, setVidible ] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    getNodes();
  }, [getNodes]);

  const handleSubmit = useCallback((params) => {
    console.log(params);
    getNodes(params);
  }, [getNodes]);

  const handleAddClick = useCallback(() => {
    form.resetFields();
    setVidible(true);
  }, [form]);

  const handleUpdateClick = useCallback((record) => {
    form.setFieldsValue(record);
    setVidible(true);
  }, [form]);

  const handleUpdate = useCallback((values) => {
    addNodes(values).then(res => {
      if (res.result) {
        message.success('保存成功');
        getNodes();
        setVidible(false);
      } else {
        message.warn(res.message);
      }
    });
  }, [addNodes, getNodes]);

  const handleDeleteClick = useCallback((record) => {
    deleteNode(record.seq).then((res) => {
      if (res.result) {
        message.success('删除成功');
        getNodes();
      } else {
        message.warn(res.message);
      }
    })
  }, [getNodes, deleteNode])

  return (
    <Card
      style={{ width: '100%', minHeight: '100%' }}
      title="标题-表格页"
    >
      <Space direction="vertical" size={20} style={{ width: '100%'}}>
        <Form layout="inline" onFinish={handleSubmit}>
          <Form.Item label="查询条件1" name="param1">
            <Input />
          </Form.Item>
          <Form.Item label="查询条件2" name="param2">
            <Select style={{ width: '174px' }}>
              <Select.Option value="1">选项1</Select.Option>
              <Select.Option value="2">选项2</Select.Option>
              <Select.Option value="3">选项3</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="查询条件3" name="param3">
            <Radio.Group>
              <Radio value="1">选项1</Radio>
              <Radio value="2">选项2</Radio>
              <Radio value="3">选项3</Radio>
              <Radio value="4">选项4</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item>
            <Button loading={loading} type="primary" htmlType="submit">查询</Button>
            <Button onClick={handleAddClick}>添加</Button>
          </Form.Item>
        </Form>
        <Row gutter={20}>
          <Col span={6}>
            <Card>
              <Statistic title="数量1" value={9999999} />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic title="数量2" value={9999999} />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic title="数量3" value={9999999} />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic title="数量4" value={9999999} />
            </Card>
          </Col>
        </Row>
        <Table
          loading={loading}
          dataSource={data}
          rowKey="seq"
          size="middle"
          bordered
        >
          <Table.Column title="序号" dataIndex="seq" />
          <Table.Column title="名称" dataIndex="name" />
          <Table.Column title="地址" dataIndex="addr" />
          <Table.Column width={160} align="center" title="操作" dataIndex="ctrl" render={(value, record) => {
            return <>
              <Button type="link" onClick={() => handleUpdateClick(record)}>修改</Button>
              <Button type="link" onClick={() => handleDeleteClick(record)}>删除</Button>
            </>;
          }} />
        </Table>
      </Space>
      <Modal visible={visible} footer={null} title="修改记录" onCancel={() => setVidible(false)}>
        <Form form={form} labelCol={{ span:6 }} wrapperCol={{ span: 14 }} name="data_from" onFinish={handleUpdate}>
          <Form.Item name="seq" hidden>
            <Input />
          </Form.Item>
          <Form.Item name="name" label="名称" rules={[{
            required: true
          }]}>
            <Input placeholder="请输入名称"/>
          </Form.Item>
          <Form.Item name="addr" label="地址" rules={[{
            required: true
          }]}>
            <Input placeholder="请输入地址"/>
          </Form.Item>
          <Form.Item label="只读内容">
            <span>这是只读内容</span>
          </Form.Item>
          <Form.Item name="param1" label="下拉选择">
            <Select placeholder="请选择">
              <Select.Option value={1}>选项1</Select.Option>
              <Select.Option value={2}>选项2</Select.Option>
              <Select.Option value={3}>选项2</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="param2" label="开关" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item name="param4" label="下拉多选">
            <Select mode="multiple" placeholder="请选择">
              <Select.Option value={1}>选项1</Select.Option>
              <Select.Option value={2}>选项2</Select.Option>
              <Select.Option value={3}>选项2</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="param5" label="单项选择">
            <Radio.Group>
              <Radio value="a">选项1</Radio>
              <Radio value="b">选项2</Radio>
              <Radio value="c">选项3</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="param6" label="多项选择">
            <Checkbox.Group>
              <Checkbox value="a">选项1</Checkbox>
              <Checkbox value="b">选项2</Checkbox>
              <Checkbox value="c">选项3</Checkbox>
            </Checkbox.Group>
          </Form.Item>
          <Form.Item name="param7" label="日期选择">
            <DatePicker />
          </Form.Item>
          <Form.Item name="param8" label="时间选择">
            <TimePicker />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6 }}>
            <Button loading={saving} type="primary" htmlType="submit">保存</Button>
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}